<!DOCTYPE html>
<html lang="zh">
<head>
    <meta charset="UTF-8"/>
    <title>组件通信示例</title>
</head>
<body>
<div id="app">
    <h1>父组件</h1>
    <p>接收到子组件的消息: {{ childMessage }}</p>
    监听属性值变化: <input v-model="info.inputValue" placeholder="请输入内容" style="margin: 5px;"/>

    <child-component :info="info"
                     @button-one-clicked="handleButtonOneClick"
                     @button-two-clicked="handleButtonTwoClick">
    </child-component>
</div>

<script src="/assets/vue/vue3.js"></script>
<script src="/assets/axios/axios.min.js"></script>
<script src="/site/js/component/ChildComponent.js"></script>
<script>
    const { createApp } = Vue;

    // 将原先的多个属性整合为一个 info 对象
    const info = ref({
        message: '这是来自父组件的字符串消息666666666',
        numberValue: 100000,
        inputValue: ''
    });

    const childMessage = ref('');

    const app = createApp({
        components: {
            ChildComponent // 局部注册组件
        },
        setup() {
            const handleButtonOneClick = (msg) => {
                childMessage.value = msg;
                console.log(msg);
            };
            const handleButtonTwoClick = (msg) => {
                childMessage.value = msg;
                console.log(msg);
            };

            return { info, childMessage, handleButtonOneClick, handleButtonTwoClick };
        }
    });

    app.mount('#app'); // 挂载到 DOM
</script>
</body>
</html>
